<template>
 <div>
   <el-row>
<!--     <el-col :span="12">我是谁</el-col>-->
<!--     <el-col :span="12">你是谁</el-col>-->
   </el-row>
     <table border="1">
         <tr>
             <td>书名</td>
             <td>价格</td>
             <td>用户ID</td>
             <td>操作</td>
         </tr>
         <tr v-for=" i in all">
             <td>{{i.title}}</td>
             <td>{{i.price}}</td>
             <td>{{i.u_id}}</td>
             <td>
                 <button @click="update(i.id)">修改</button>
                 <button @click="del(i.id)">删除</button>
             </td>
         </tr>
     </table>

      <template>
        <el-table border
          :data="all"
          style="width: 100%">
          <el-table-column type="index" label="序号">

          </el-table-column>
          <el-table-column type="index"
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title"
            label="书名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button type="primary" plain v-on:click="del(scope.row.id)">删除</el-button>
          </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button type="primary" plain v-on:click="del(scope.row.id)">修改</el-button>
          </template>
          </el-table-column>
        </el-table>
  </template>
 </div>
</template>


<script>
  import axios from 'axios'
export default {
 data() {
  return {
      all:[],
  }
 },
 components: {

 },
 mounted() {
   axios({
     url:'http://127.0.0.1:8000/book/',
     method:"get",
   }).then(res=>{
     this.all = res.data.data
   })


 },
 methods:{
     // getbook(){
     //    this.axios({
     //        url:'http://127.0.0.1:8000/user/',
     //        method:"get",
     //    }).then(res=>{
     //        this.all = res.data.data
     //    })
     // },

     del(id){
        this.axios({
            url:'http://127.0.0.1:8000/delbook/?id='+id,
            method:"get",
     }).then(res=>{
        this.getbook()
     })
    },

    update(id){
        this.$router({'username':'update',query:{'id':id}})
    }
}
}
</script>
